<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="cv" width="500px" height="600px">您的浏览器不支持canvas</canvas>
  </body>
  <script>
    var cv = document.getElementById("cv");
    if (cv.getContext("2d")) {
      // 创建canvas对象
      var ctx = cv.getContext("2d");
      ctx.beginPath(); //开始笔触(表示可以开始绘画了)
      ctx.arc(200, 200, 200, 0, 2 * Math.PI, true); //绘制圆

      ctx.moveTo(150, 100); //移动笔触
      ctx.arc(100, 100, 50, 0, 2 * Math.PI, true); //绘制圆
      //ctx.arc(100, 100, 50, Math.PI, 2 * Math.PI, true);//绘制圆

      ctx.moveTo(350, 100); //移动笔触
      ctx.arc(300, 100, 50, 0, 2 * Math.PI, true); //绘制圆

      ctx.moveTo(250, 300); //移动笔触
      ctx.arc(200, 300, 50, Math.PI, 2 * Math.PI, true); //绘制一个半圆
      // ctx.arc(200,300,50,0,Math.PI,false)

      ctx.lineWidth = 5;
      ctx.strokeStyle = "aqua";
      ctx.stroke(); //描边
    } else {
      alert("您的浏览器不支持canvas");
    }
  </script>
</html>
